<template>
	<div class="studentCredits">
		<div class="teach_h clear">
			<span>我的学分</span>
			<div class="myCredits fr">
				已获得<i>{{creditsY || 0}}</i>学分，待修<i>{{creditsN || 0}}</i>学分
			</div>
		</div>
		<div class="studentCredits-c">
			<template>
				<el-tabs v-model="activeName">
					<el-tab-pane label="待修学分" name="1">
						<ul v-loading="loading">
							<li class="classLs clear" v-for="item in creditList" :key="item.id">
								<a @click="openClass(item)">
									<img :src="BASE_URL+item.picture" :onerror="errorImg">
								</a>
								<div class="classLs_info">
									<div class="classLs_1 clear">
										<a @click="openClass(item)">{{item.name}}</a>
										<div class="resource_ioperation fr">
											<a @click="openClass(item)" class="learn">
												继续学习
												<i class="el-icon-arrow-right"></i>
											</a>
										</div>
									</div>
									<div class="classLs_4">
										<span>主讲：{{item.uname}}</span>
										<span>时长: {{item.length}}</span>
										<span>学分: <i class="credit-S">{{item.study_score}}</i></span>
									</div>
									<div class="classLs_3">
										<i>简介：</i>
										{{item.profile}}
									</div>
								</div>
							</li>
						</ul>
						<div class="pageBox" v-if="total_number > page_size">
							<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
							</el-pagination>
						</div>
						<div class="dependent" v-if="placeholder">
							<i class="ipm image_nofound"></i>
							<p>
								还没发现任何相关的内容哦~
							</p>
						</div>
					</el-tab-pane>
					<el-tab-pane label="我的学分" name="2">
						<ul v-loading="loading2">
							<li class="classLs clear" v-for="item in creditList2" :key="item.id">
								<a @click="openClass(item)">
									<img :src="BASE_URL+item.picture">
								</a>
								<div class="classLs_info">
									<div class="classLs_1 clear">
										<a @click="openClass(item)">{{item.vname}}</a>
										<div class="resource_ioperation fr">
											<a @click="openClass(item)" class="learn">
												继续学习
												<i class="el-icon-arrow-right"></i>
											</a>
										</div>
									</div>
									<div class="classLs_4">
										<span>主讲：{{item.uname}}</span>
										<span>时长: {{item.length}}</span>
										<span>学分: <i class="credit-S">{{item.study_score}}</i></span>
									</div>
									<div class="classLs_3">
										<i>简介：</i>
										{{item.profile}}
									</div>
								</div>
							</li>
						</ul>
						<div class="pageBox" v-if="total_number2 > page_size2">
							<el-pagination @current-change="change_page2" :page-size="page_size2" :current-page="page_index2" layout="prev, pager, next" :total="total_number2">
							</el-pagination>
						</div>
						<div class="dependent" v-if="placeholder2">
							<i class="ipm image_nofound"></i>
							<p>
								还没发现任何相关的内容哦~
							</p>
						</div>
					</el-tab-pane>
				</el-tabs>
			</template>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			activeName: '1',
			creditList: [],
			total_number: 0,
			page_size: this.$g.page_size,
			page_index: 1,

			creditList2: [],
			total_number2: 0,
			page_size2: this.$g.page_size,
			page_index2: 1,

			creditsY: '',
			creditsN: '',
			errorImg: 'this.src="' + require('../../../public/images/image20.png') + '"',
			placeholder: false,
			placeholder2: false,
			loading: true,
			loading2: true,
		};
	},
	created() {
		this.getCredit();
		this.getCredit2()
	},
	methods: {
		/*
			跳转到优课专辑模块查看视频
		 */
		openClass(item) {

			if (item.status_m3u8 == 1) {
				let host = sessionStorage.getItem('host')
				let redirectParams = sessionStorage.getItem('redirect_params')
				let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/openclassDetail&id=${item.id}`
				window.open(link)
			}else{
				this.$message.warning('视频正在转码中，在转码期间视频将不能播放')
			}


		},
		//待修学分
		getCredit() {
			let success = (res => {
				let data = res.data;
				this.creditList = data.data;
				this.total_number = data.data_sum;
				this.page_index = parseInt(data.page_index)
				this.creditsN = data.sum_score;

				this.loading = false
				this.placeholder = this.creditList.length === 0 ? true : false
			});
			this.$ajax({
				url: 'api/video/need_score_video',
				method: 'get',
				params: {
					userid: this.$g.user_id,
					page_index: this.page_index,
					page_size: this.page_size
				},
				func: {
					success: success
				}
			})
		},
		change_page(val) {
			this.page_index = val;
			this.getCredit()
		},
		//我的学分
		getCredit2() {
			let success = (res => {
				let data = res.data;
				this.creditList2 = data.data;
				this.total_number2 = data.data_sum;
				this.page_index2 = parseInt(data.page_index)

				this.creditsY = data.sum_score;

				this.loading2 = false
				this.placeholder2 =  this.creditList2.length === 0 ? true : false
			});
			this.$ajax({
				url: 'api/video/get_score_video_list',
				method: 'get',
				params: {
					userid: this.$g.user_id,
					page_index: this.page_index2,
					page_size: this.page_size2
				},
				func: {
					success: success
				}
			})
		},
		change_page2(val) {
			this.page_index2 = val;
			this.getCredit()
		}

	}
};
</script>